<template>
  <div class="VipCard">
    <div class="bgBox">
      <div class="box" v-if="vipImgUrl">
        <img :src="$imgUrl+vipImgUrl.value" alt="">
      </div>
      <div v-html="replaceSpecialChar(vipShowContent.vaule)" v-if="vipShowContent"></div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      vipShowContent:null,
      vipImgUrl:null,
    }
  },
  created(){
    this.getVipImg()
    this.getVipShowContent()
  },
  methods:{
    getVipImg() {
      let _self = this;
      this.$Api
        .getMetaByKey({
          key: "vipImgUrl",
        })
        .then((res) => {
          if (res.code == 1) {
            _self.vipImgUrl = res.data;
          }
        });
    },
    getVipShowContent() {
      let _self = this;
      this.$Api
        .getMetaByKey({
          key: "vipShowContent",
        })
        .then((res) => {
          if (res.code == 1) {
            _self.vipShowContent = res.data;
          }
        });
    },
  }
};
</script>

<style scoped>
.VipCard .bgBox {
  margin: 37px 24px;
}
.VipCard .box {
  width: 100%;
  border-radius:2px;
  margin-bottom:37px;
  overflow: hidden;
}

.VipCard .box img{
    width: 100%;
}

.bgBox ul {
  color: #999999;
  line-height: 65px;
}
</style>